<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:panelGrid columns="4" cellspacing="0" columnClasses="colTop,colTop,colTop,colTop,colTop" >

        <!-- SUBTIPOS -->
        <h:panelGroup rendered="#{not empty catalogoBean.subTipos}" >

            <div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                 style="height: 20px; margin-right: 5px;">

                <div style="width: 100%; vertical-align: middle; margin-top: 3px;" align="center">
                    Subtipo
                </div>
            </div>

            <p:selectOneListbox value="#{catalogoBean.subTipo}" id="subtipo" required="false" style="width:240px; height: 140px; overflow-y:auto;"
                                   >
                <f:selectItem itemLabel="Ver todo" itemValue="" />
                <f:selectItems value="#{catalogoBean.subTipos}" var="i" itemLabel="#{i.descrp}" itemValue="#{i.valrub}"  />

                <p:ajax listener="#{catalogoBean.verProductosByRubro(true)}" process="@this" update="@form"  />
            </p:selectOneListbox>

        </h:panelGroup>

        <!-- MARCAS -->
        <h:panelGroup rendered="#{not empty catalogoBean.marcas}" styleClass="tituloLista" style="width: 300px;" >

            <div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                 style="height: 20px; margin-right: 5px;">

                <div style="width: 100%; vertical-align: middle; margin-top: 3px;" align="center">
                    Marca
                </div>
            </div>
            <p:selectOneListbox value="#{catalogoBean.marca}" id="marca" style="width: 220px;  height: 140px; overflow-y:auto;" >
                <f:selectItem itemLabel="Ver todo" itemValue="" />
                <f:selectItems value="#{catalogoBean.marcas}" var="i" itemLabel="#{i.descrp}" itemValue="#{i.valrub}"  />

                <p:ajax listener="#{catalogoBean.verProductosByMarcas}" process="@this" update="@form" />
            </p:selectOneListbox>
        </h:panelGroup>

        <!-- ORIGEN -->
        <h:panelGroup rendered="#{not empty catalogoBean.origenProducto }" >

            <div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                 style="height: 20px; margin-right: 5px;">

                <div style="width: 100%; vertical-align: middle; margin-top: 3px;" align="center">
                    Origen
                </div>
            </div>

            <p:selectOneListbox value="#{catalogoBean.productoOrigen}"  style="min-width: 90px;  height: 100px;">

                <f:selectItem itemLabel="Ver todo" itemValue="T" />
                <f:selectItems value="#{catalogoBean.origenProducto}" var="i" itemLabel="#{i.descripcion}" itemValue="#{i.codigo}"  />
                
                <p:ajax listener="#{catalogoBean.verProductos}" process="@this" update="@form" />
            </p:selectOneListbox>
        </h:panelGroup>

        <!-- NOVEDADES -->
        <h:panelGroup rendered="#{ not empty catalogoBean.catalogo }" >

            <div id="j_idt156_header"
                     class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                     style="height: 20px; margin-right: 5px;">

               <div style="width: 100%; vertical-align: middle; margin-top: 3px;" align="center">
                    Novedades
               </div>

            </div>            
            <p:selectOneListbox value="#{catalogoBean.productoNuevo}" style="min-width: 120px; height: 100px;">
                <f:selectItem itemLabel="Ver todo" itemValue="T" />
                <f:selectItems value="#{catalogoBean.novedadesProducto}" var="i" itemLabel="#{i.descripcion}" itemValue="#{i.codigo}"  />
                <p:ajax listener="#{catalogoBean.verProductos}" process="@this" update="@form" />

            </p:selectOneListbox>
        </h:panelGroup>

    </h:panelGrid>

    <p:spacer width="700" height="5" />

    <!-- SUGERENCIAS -->
    <h:panelGroup rendered="#{catalogoBean.muestraPrincipal and empty catalogoBean.catalogo}">

        <div style="width: 100%; height: 100%; position: relative;">        

            <div style="float: right; top: 0px; position: relative; width: 300px; height: 80px;" >
                <div class="ui-messages ui-widget" aria-live="polite">
                <div class="ui-messages-info ui-corner-all">
                    <a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;">
                        <span class="ui-icon ui-icon-close">

                        </span>
                    </a>
                    <span class="ui-messages-info-icon"></span><ul>
                        <li><span class="ui-messages-info-summary">Información</span>
                            <span class="ui-messages-info-detail">
                                Desde nuestro buscador, encuentre productos por su código, descripción, tipo, subtipo y marca
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
               
            </div>

            <div style="float: left; top: 150px; position: relative; ">

                <div class="ui-messages ui-widget" aria-live="polite">
                    <div class="ui-messages-info ui-corner-all">
                        <a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;">
                            <span class="ui-icon ui-icon-close">

                            </span>
                        </a>
                        <span class="ui-messages-info-icon"></span><ul>
                            <li><span class="ui-messages-info-summary">Información</span>
                                <span class="ui-messages-info-detail">Haga click en un tipo de producto para comenzar su busqueda</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        
    </h:panelGroup>

    <!-- BUSQUEDA SIN RESULTADO -->
    <h:panelGroup rendered="#{not catalogoBean.muestraPrincipal and empty catalogoBean.catalogo}">

        <p:messages showDetail="true" />
                    
        <div style="width: 100%; position: relative; float: left;text-align: center; margin: 25px;" >           

            <p:commandButton value="Volver" icon="conversor16"
                             onclick="txtBusqueda.value = ''"
                             actionListener="#{catalogoBean.verProductos}" process="@this,txtBusqueda" update="@form" />
            
        </div>        

    </h:panelGroup>

    <!-- BARRA HERRAMIENTAS -->
    <div style="width: 100%; text-align: right; padding: 10px;">

        <h:panelGroup rendered="#{not empty catalogoBean.catalogo and catalogoBean.tipoVista != 'D' and usuarioSessionBean.estaRegistrado}">

            <div style="width:100%; margin:15px 0 15px 0; position: relative; float: left; text-align: left;">

                    <p:commandButton value="Porcentaje marcación" icon="porcentaje16"
                                     actionListener="#{catalogoBean.setMuestraPanelMarcacion(true)}"
                                     update="@form"/>

                    <p:commandButton value="Conversor de medida" icon="conversor16"
                                     actionListener="#{catalogoBean.setMuestraConversorMedida(true)}"
                                     update="@form" />

                    <p:commandButton value="Descargar listado" icon="excel16" 
                                     actionListener="#{catalogoBean.setMuestraPanelDescarga(true)}"
                                     update="@form" />                   

            </div>
            
            <p:selectOneButton value="#{catalogoBean.tipoVista}" id="oneButtonVista">
                <f:selectItem itemLabel="Vista Detalle"  itemValue="T"  />
            <f:selectItem itemLabel="Vista Paneles" itemValue="P" />
                <p:ajax update="@form" process="@this" event="change" listener="#{catalogoBean.guardarUltimaVista}"/>
            </p:selectOneButton>
            
        </h:panelGroup>

    </div>

    <h:form>
            
        <div style="width:100%; text-align:center; margin-top:30px; ">
            <h1> Tipos de productos </h1>
            <p>Seleccione un tipo de producto para visulizar sub-tipos, precios y características de cada producto.
                También puede dirigirse a la vista clásica haciendo clic <a href="catalogo.jsf">aquí.</a></p>
        <div class="ui-grid ui-grid-responsive">
               
            <ul class="ui-grid-row k-effect circle" value="#{catalogoBean.tipoProducto}"  converter="#{conversorBean.conversorTipoProducto}"  >
                 <ui:repeat value="#{catalogoBean.tiposProductos}" var="t">
                     <li class="ui-grid-col-3">
                          <p:commandLink actionListener="#{catalogoBean.verProductosByRubro(true)}" process="@this" update="@form" >
                           
                                  <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/#{t.nombreImagen}" />
                                  <span class="mask"></span>
                                  <div class="descTipo"><h:outputText value="#{t.descrp}" /></div>
                                  

                        </p:commandLink> 
                     </li>

                 </ui:repeat>
        </ul>
       </div>
        </div>
       
        </h:form>
    
    
    <!-- PANEL PORCENTAJE MARCACION -->
    <ui:include src="../inventario/catalogoMarcacion.xhtml" />

    <!-- PANEL CONVERSOR DE MEDIDA -->
    <ui:include src="../global/conversorMedidas.xhtml" />

    <!-- PANEL DE DESCARGA -->
    <ui:include src="../inventario/catalogoExportar.xhtml" />

    <p:spacer width="700" height="5" />
    <!-- CATALOGO DE PRODUCTOS -->
    <ui:include src="../inventario/vistaDetalle.xhtml" />

    <!-- PANEL DE PRODUCTOS -->
    <ui:include src="../inventario/vistaPanel.xhtml" />

    <!-- FICHA DE PRODUCTO -->
    <ui:include src="../inventario/catalogoFichaProducto.xhtml" />

    <p:spacer width="700" height="5" />    

    <!-- CONFIRMAR CANTIDAD -->
    <ui:include src="../inventario/catalogoConfirmaCantidad.xhtml" />
    
    <!-- CONFIRMAR BORRADO -->
    <ui:include src="../inventario/catalogoConfirmaBorrado.xhtml" />

    <!-- VER SUSTITUTOS -->
    <ui:include src="../inventario/verSustitutos.xhtml" />
    
    <!-- VER SUSTITUTOS -->
    <ui:include src="../inventario/verSugeridos.xhtml" />
    
    <!-- LISTA DE PEDIDOS PENDIENTES -->
    <ui:include src="../inventario/catalogoPedidosPendientes.xhtml" />

    <!-- PEDIDO PENDIENTE -->
    <ui:include src="../facturacion/pedido.xhtml"  />
    
    
    
    
   
</ui:composition>
